<template>
    <!-- <div><span @click="PublishVisible = true">特殊测试</span> -->
    <el-dialog :visible.sync="PublishVisible" custom-class="dialogStyle">
        <h3 slot="title" style="margin-top:0"> <i class="el-icon-edit iconStyle"></i>美食修改</h3>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm formStyle">

            <!-- 菜图 -->
            <el-form-item label="菜图" class="dishes-label">
                <!-- {{ruleForm.dishesImg}}
                <el-image :src="ruleForm.dishesImg" fit="cover" class="avatar"></el-image> -->
                <!-- <img :src="ruleForm.dishesImg"  style="width:180px;height:180px;object-fit: cover;"/> -->
                <ImgUpload @upImg="showUrl" :haveImageUrl="ruleForm.dishesImg" class="dishes-img"></ImgUpload>
            </el-form-item>

            <!-- 菜名 -->
            <el-form-item label="菜名" prop="dishesName" class="dishes-label">
                <el-input v-model="ruleForm.dishesName"></el-input>
            </el-form-item>

            <!-- 相关介绍 -->
            <el-form-item label="介绍" class="dishes-label">
                <el-input type="textarea" :autosize="{ minRows: 3}" v-model="ruleForm.dishesDescribe"></el-input>
            </el-form-item>

            <!-- 配料 -->
            <el-form-item label="配料" prop="dishesIngredients" class="dishes-label">
                <!-- {{ruleForm.dishesIngredients}} -->
                <el-row style="margin-bottom:-10px">
                    <el-col :span="10"><i class="el-icon-tableware"></i><span>&nbsp;配料名称</span></el-col>
                    <el-col :span="6"><i class="el-icon-menu"></i><span>&nbsp;数量</span></el-col>
                    <el-col :span="4"><i class="el-icon-coin"></i><span>&nbsp;单位</span></el-col>
                    <el-col :span="4"><i class="el-icon-s-tools"></i><span>&nbsp;操作</span></el-col>
                </el-row>
                <el-row v-for="(di,index) in ruleForm.dishesIngredients" :key="index" style="margin-top:20px">
                    <!-- 配料名称 -->
                    <el-col :span="10">
                        <el-form-item :prop="'dishesIngredients.'+index+'.ingredientsName'"
                            :rules="rules.ingredientsName">
                            <el-input v-model="di.ingredientsName" style="width:95%;"></el-input>
                        </el-form-item>
                    </el-col>
                    <!-- 配料数目 -->
                    <el-col :span="6">
                        <el-form-item :prop="'dishesIngredients.'+index+'.ingredientsNum'"
                            :rules="rules.ingredientsNum">
                            <el-input v-model="di.ingredientsNum" style="width:98%;"></el-input>
                        </el-form-item>
                    </el-col>
                    <!-- 配料单位 -->
                    <el-col :span="4">
                        <el-form-item :prop="'dishesIngredients.'+index+'.ingredientsUnit'"
                            :rules="rules.ingredientsUnit">
                            <el-select v-model="di.ingredientsUnit" placeholder="单位">
                                <el-option :label="unit" :value="unit" v-for="unit in units" :key="unit.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!-- 相关操作 -->
                    <el-col :span="4">
                        <el-popconfirm :title=" '确定删除 '+di.ingredientsName+' 吗？' "
                            @onConfirm="deleteIngredients(index,di.ingredientsId)">
                            <i class="el-icon-delete" style="font-size: 20px;color:red;margin-left:10px;"
                                slot="reference"></i>
                        </el-popconfirm>

                        <i class="el-icon-plus" style="font-size: 20px;color:#4a90e2;margin-left:15px;font-weight:600;"
                            @click="addIngredients(index)"></i>
                    </el-col>

                </el-row>
            </el-form-item>

            <!-- 做菜步骤 -->
            <el-form-item :label="getStep(index)" prop="dishesStep" v-for="(ds,index) in ruleForm.dishesStep"
                :key="index">
                <!-- {{ds}} -->
                <el-row>
                    <el-col :span="6">
                        <ImgUpload :stepindex="index" @upImg="stepImgUrl" :haveImageUrl="ds.stepImg" class="step-img"></ImgUpload>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :prop="'dishesStep.'+index+'.stepContent'" :rules="rules.stepContent">
                            <el-input type="textarea" :autosize="{ minRows: 5}" v-model="ds.stepContent">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <div style="margin-left:10px">
                            <el-button type="primary" icon="el-icon-plus" @click="addStep(index)" style="height:55px;">
                                &nbsp;添加
                            </el-button>
                        </div>
                        <div style="margin-left:10px;margin-top:8px;">
                            <el-popconfirm :title=" '确定删除 '+getStep(index)+' 吗？' " @onConfirm="deleteStep(index,ds.stepId)">
                                <el-button type="danger" icon="el-icon-delete" style="height:55px;" slot="reference">
                                    &nbsp;移除
                                </el-button>
                            </el-popconfirm>
                        </div>
                    </el-col>
                </el-row>
            </el-form-item>

            <!-- 标签分类 -->
            {{ruleForm.dishesTag}}
            <el-form-item label="标签" prop="dishesTag" class="dishes-label">
                <el-select v-model="ruleForm.dishesTag" placeholder="请选择分类">
                    <el-option label="原创美食" value="原创">
                        <i class="el-icon-dish iconStyle" style="color: #409EFF;"></i>
                        <span style="margin-left:10px">原创美食</span>
                    </el-option>
                    <el-option label="翻制美食" value="翻制">
                        <i class="el-icon-burger iconStyle" style="color: #f5a623;"></i>
                        <span style="margin-left:10px">翻制美食</span>
                    </el-option>
                </el-select>
            </el-form-item>

            <!-- {{ruleForm.dishesTime}}

            {{ruleForm}} -->
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>

        </el-form>
    </el-dialog>
</template>

<script>
    import ImgUpload from "../../common/AltetDishesiUpload"

    import {
        postDishes,
        postIngredients,
        postStep,
        deleteDishes,
        mysqlDeleteStep,
        mysqlDeleteIngredients,
    } from '@/api/dishesApi.js';

import {
        mapGetters
    } from 'vuex'

    export default {
        name: 'Publish',
        components: {
            ImgUpload
        },
        data() {
            return {
                PublishVisible: false,
                count: 1,
                units: ['克', '千克', '个', '盒', '勺', '根', '斤', '升', '毫升'],
                ruleForm: {
                    dishesId: '',
                    dishesImg: '',
                    dishesName: '',
                    dishesDescribe: '',
                    dishesIngredients: [{
                        ingredientsId: '',
                        ingredientsName: '',
                        ingredientsNum: '',
                        ingredientsUnit: '',
                    }],
                    dishesStep: [{
                        stepId: '',
                        stepImg: '',
                        stepContent: '',
                        stepNum: 0,
                    }],
                    dishesCollect: 0,
                    dishesGoodnum: 0,
                    dishesTag: '',
                    dishesUser: '',
                    dishesTime: '',
                },
                rules: {
                    dishesName: [{
                            required: true,
                            message: '请输入菜名',
                            trigger: 'blur'
                        },
                        {
                            max: 20,
                            message: '最多20个字符哦~',
                            trigger: 'blur'
                        }
                    ],
                    dishesTag: [{
                        required: true,
                        message: '请选择分类',
                        trigger: 'change'
                    }],
                    dishesIngredients: [{
                        required: true,
                        message: ' ',
                        trigger: 'blur'
                    }],
                    ingredientsName: [{
                        required: true,
                        message: '请填入配料名',
                        trigger: 'blur'
                    }],
                    ingredientsNum: [{
                        required: true,
                        message: '请填入数量',
                        trigger: 'blur'
                    }],
                    ingredientsUnit: [{
                        required: true,
                        message: '请选择单位',
                        trigger: 'change'
                    }],
                    dishesStep: [{
                        required: true,
                        message: ' ',
                        trigger: 'blur'
                    }],
                    stepContent: [{
                        required: true,
                        message: '请填入步骤详细内容',
                        trigger: 'blur'
                    }],
                },

            }
        },
        computed: {
            ...mapGetters(['getDishesInfo'])
        },
        methods: {
            // 提交数据
            submitForm(ruleForm) {
                this.ruleForm.dishesUser = this.$store.state.user.userId;

                this.$refs[ruleForm].validate((valid) => {
                    if (valid) {
                            postDishes(this.ruleForm.dishesId,
                                this.ruleForm.dishesImg,
                                this.ruleForm.dishesName,
                                this.ruleForm.dishesDescribe,
                                this.ruleForm.dishesCollect,
                                this.ruleForm.dishesGoodnum,
                                this.ruleForm.dishesTag,
                                this.ruleForm.dishesUser,
                                this.ruleForm.dishesTime).then(resp => {
                                this.submitDishesOther(resp.data)
                            })
                        //this.$refs[ruleForm].resetFields();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            submitDishesOther(dishesid) {
                for (let i = 0; i < this.ruleForm.dishesIngredients.length; i++) {
                    postIngredients(this.ruleForm.dishesIngredients[i].ingredientsId,
                        dishesid,
                        this.ruleForm.dishesIngredients[i].ingredientsName,
                        this.ruleForm.dishesIngredients[i].ingredientsNum,
                        this.ruleForm.dishesIngredients[i].ingredientsUnit)
                }

                for (let j = 0; j < this.ruleForm.dishesStep.length; j++) {
                    postStep(this.ruleForm.dishesStep[j].stepId,
                        dishesid,
                        this.ruleForm.dishesStep[j].stepImg,
                        this.ruleForm.dishesStep[j].stepContent,
                        this.ruleForm.dishesStep[j].stepNum)
                }
            },
            // 清空表单
            resetForm(ruleForm) {
                this.PublishVisible=false,
                deleteDishes(this.ruleForm.dishesId).then(resp=>{
                   this.$store.commit('initMenus', resp.data)
                })
                console.log(ruleForm)
                //this.$refs[ruleForm].resetFields();
            },
            // 将图片地址传给前端
            showUrl(data) {
                this.ruleForm.dishesImg = data.urlImg;
            },
            // 添加步骤
            addStep(index) {
                let num = parseInt(index, 10) + 1;
                //var date = new Date();
                this.ruleForm.dishesStep.splice(index + 1, 0, {
                    stepId: '',
                    stepImg: '',
                    stepContent: '',
                    stepNum: num,
                })
                this.setStepNum(index);
            },
            // 添加步骤对应的图片
            stepImgUrl(data) {
                console.log(data.urlImg);
                this.ruleForm.dishesStep[data.imgIndex].stepImg = data.urlImg;
            },
            // 删除步骤
            deleteStep(index,id) {
                console.log("changdu" + this.ruleForm.dishesStep.length);
                if (0 == this.ruleForm.dishesStep.length - 1) {
                    this.$message({
                        message: '至少要填一个步骤哦~',
                        type: 'warning'
                    });
                    return;
                }
                mysqlDeleteStep(id)
                this.ruleForm.dishesStep.splice(index, 1)
                let x = parseInt(index, 10) - 1;
                this.setStepNum(x);
            },
            // 获取第几步
            getStep(index) {
                let num = parseInt(index, 10) + 1;
                return '第' + num + '步';
            },
            // 步骤顺序重新排序
            setStepNum(index) {
                let num = parseInt(index, 10) + 1;
                for (num; num < this.ruleForm.dishesStep.length; num++) {
                    this.ruleForm.dishesStep[num].stepNum = num;
                }
            },
            // 添加配料
            addIngredients(index) {
                this.ruleForm.dishesIngredients.splice(index + 1, 0, {
                    ingredientsId: '',
                    ingredientsName: '',
                    ingredientsNum: '',
                    ingredientsUnit: '',
                })
            },
            // 删除配料
            deleteIngredients(index,id) {
                if (0 == this.ruleForm.dishesIngredients.length - 1) {
                    this.$message({
                        message: '至少要填一个配料哦~',
                        type: 'warning'
                    });
                    return;
                }
                mysqlDeleteIngredients(id)
                this.ruleForm.dishesIngredients.splice(index, 1)
            },
        },
        updated() {
            this.ruleForm=this.getDishesInfo[0]
        },
    }
</script>

<style>
    .dialogStyle {
        min-width: 720px
    }

    .formStyle {
        margin-top: -20px;
        text-align: left;
    }

    .iconStyle {
        font-weight: 700;
        font-size: 16px
    }

    .dishes-label .el-form-item__label {
        font-weight: 700;
        /* color:red */
    }

    .step-img .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }

    .step-img .avatar {
        width: 120px;
        height: 120px;
        display: block;
    }

    .dishes-img .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .dishes-img .el-upload {
        height: 178px;
    }
</style>